<template>
  <div>
    <van-popup
      get-container="#app"
      :value="value"
      @input="$emit('input', $event)"
    >
      <van-cell-group v-if="!isReport">
        <!-- 点击为不感兴趣 -->
        <van-cell @click="disLike" icon="closed-eye">不感兴趣</van-cell>
        <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
        <van-cell icon="info-o">拉黑作者</van-cell>
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
        <van-cell @click="disLike" v-for="item in reports" :key="item.value">{{
          item.label
        }}</van-cell>
        <!-- <van-cell>色情</van-cell>
        <van-cell>暴力</van-cell>
        <van-cell>低俗</van-cell>
        <van-cell>不适</van-cell>
        <van-cell>错误</van-cell>
        <van-cell>其他</van-cell> -->
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { disLikeById } from '@/api/home.js'
import { reports } from '@/api/const.js'
export default {
  emits: ['input'],
  props: {
    // 外边v-model传值：接收必须叫value
    value: {
      type: Boolean,
      default: false
    },
    artId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 是否显示上报垃圾内容
      isReport: false,
      reports
    }
  },
  methods: {
    async disLike () {
      try {
        await disLikeById(this.artId)
        // 弹窗提示
        this.$toast.success('操作成功！')
        // 通知父删除不感兴趣文章
        this.$emit('del-unlike')
        // 关闭弹层
        this.$emit('input', false)
      } catch (error) {
        // console.dir(error)
        this.$toast.fail('操作失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
